<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <link rel="shortcut icon" href="/static/1.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat Room Admin</title>
</head>

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <nav>
        <div class="nav-wrapper teal">
            <a href="#" class="brand-logo center">Admin</a>
        </div>
    </nav>
    <div class="container">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row">
            <div class="col s4 offset-s4 ">
                <!--username and logout-->
                <p id="username" class="flow-text">Welcome administrator {{username}}!</p>
                <form class="col s12" method="post" action="{{ url_for('logout') }}">
                    <button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
                        name="action">Logout
                    </button>
                </form>
                <div class="row"></div>
                <!--TODO logs-->
                
                <!--TODO userlist usercount-->

                <!--operations-->
                <form class="col s12" method="post" action="{{ url_for('admin') }}">
                    <h4>User Operation</h4>
                    <div class="row">
                        <div class="input-field col s12">
                            <select id="operation" name="operation" onchange="userOperation(this)">
                                <option value="" disabled selected>Select an Operation</option>
                                <option value="1">Add</option>
                                <option value="2">Edit</option>
                                <option value="3">Delete</option>
                            </select>
                            <label>Operation Selection</label>
                        </div>
                        <div class="input-field col s12">
                            <input value="" id="username" type="text" class="validate" name="username">
                            <label class="active" for="username">Enter a username:</label>
                        </div>
                        <div class="input-field col s12">
                            <input value="" id="password" type="text" class="validate" name="password">
                            <label class="active" for="password">Enter a password:</label>
                        </div>
                        <div class="input-field col s12">
                            <input value="" id="group" type="text" class="validate" name="group">
                            <label class="active" for="group">Enter a group:</label>
                        </div>
                    </div>
                    <button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
                        name="action">Submit
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!--alerts-->
    {% with errors = get_flashed_messages(category_filter=["no_user_error"]) %}
    {% if errors %}
    <script>
        alert("No such user!");
    </script>
    {% endif %}
    {% endwith %}

    {% with errors = get_flashed_messages(category_filter=["duplicated_user_error"]) %}
    {% if errors %}
    <script>
        alert("Username already exist!");
    </script>
    {% endif %}
    {% endwith %}

    {% with errors = get_flashed_messages(category_filter=["cannot_del_error"]) %}
    {% if errors %}
    <script>
        alert("Cannot delete default admin account!");
    </script>
    {% endif %}
    {% endwith %}


    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        /*dropdown selection initiallize*/
        $(document).ready(function () {
            $('select').formSelect();
        });

        /*disable input by selection*/
        function userOperation(op) {
            val = op.options[op.selectedIndex].value;
            console.log(val);
            if (val == 3) {
                $('#password').attr("disabled", true);
                $('#group').attr("disabled", true);
            } else {
                $('#password').attr("disabled", false);
                $('#group').attr("disabled", false);
            }
        }
    </script>
</body>

</html>